<!--数据字典管理-->
<template>
  <div>
    <a-card>
      <p slot="title">
        检索条件
      </p>
      <div class="formSearch">
        <a-form ref="entryDTO" :label-width="80" layout="inline"
                @keydown.native.enter.prevent="handleSubmit">
          <a-form-item label="实验室：" prop="searchKey">
            <a-select style="width: 250px"
                placeholder="全部" v-model="labId"
            >
              <a-select-option v-for="item in labSelectList" :value="item.value"
                               :key="item.value">{{item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="起止时间：" style="margin-right: 25px;">
            <a-date-picker
                showTime
                format="YYYY-MM-DD HH:mm:ss"
                v-model="startValue"
                placeholder="开始时间"
                style="width: 200px; float: left"
            />
            <span style="width: 20px; float: left; text-align: center">-</span>
            <a-date-picker
                :disabledDate="disabledEndDate"
                showTime
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="结束时间"
                v-model="endValue"
                style="width: 200px; float: left"
            />
          </a-form-item>
          <a-button type="primary" @click="handleSubmit"
          >查询
          </a-button>
          <a-button style="margin-left: 8px" @click="reStore">重置</a-button>
        </a-form>
      </div>
    </a-card>
    <div style="height: 10px"></div>
    <div class="commonStyle nyContent">
      <a-row  style="width: 1000px">
        <a-col span="4">
          <a-statistic
              title="申请总数"
              :value="approveStatistic.appCount"
              :precision="0"
              :value-style="{ color: '#000000' }"
              style="margin-right: 50px;text-align: center"
          >
          </a-statistic>
        </a-col>
        <a-col span="4">
          <a-statistic
              title="授权总数"
              :value="approveStatistic.authCount"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px;text-align: center"
          >
          </a-statistic>
        </a-col>
        <a-col span="4">
          <a-statistic
              title="取消授权数"
              :value="approveStatistic.cancelAuthCount"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px;text-align: center"
          >
          </a-statistic>
        </a-col>
        <a-col span="4">
          <a-statistic
              title="通过总数"
              :value="approveStatistic.passCount"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px;text-align: center"
          >
          </a-statistic>
        </a-col>
        <a-col span="5">
          <a-statistic
              title="驳回总数"
              :value="approveStatistic.refuseCount"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px;text-align: center"
          >
          </a-statistic>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Util from '@/libs/util';
import moment from 'moment'
export default {
  name: 'entryManage',
  components: {
  },
  data () {
    return {
      title: true,
      labId: '',
      startValue: null,
      endValue: null,
      approveStatistic: {
        appCount:0,
        authCount:0,
        cancelAuthCount:0,
        passCount:0,
        refuseCount:0
      },

    }
  },
  computed: {
    labSelectList () {
      return this.$store.state.acManage.labSelectList
    },
    ...mapState ({
      pageVal: state => state.entryManage.page,
    }),

  },
  filters: {
    filterWord(value, list) {
      for (let i=0; i<list.length; i++) {
        if (value === list[i].value) {
          return list[i].label
        }
      }
    },
  },
  methods: {
    /**
     * Function    : disabledEndDate
     * Description : 对结束时间进行限制
     * Input       : endValue
     * Return      : None
     */
    disabledEndDate ( endValue) {
      const startTime = this.startTime
      if (startTime) {
        return startTime.valueOf () >= endValue.valueOf ()
      }
      return (
          endValue && endValue < moment(startTime)
      )
    },
    emitEmpty () {
      this.labId = ''
      this.init ()
    },
    reStore(){
      this.searchKey = ''
      this.page.currentPage = 1
      this.init();
    },
    /*
     * 过滤输入框输入的特殊字符
     * */
    formatEnterContent ( value ) {
      let a = Util.clearSpecialChart(value);
      this.searchKey = a
    },

    /**
     * Function    : init
     * Description : 初始化列表
     * Input       : none
     * Return      : none
     */
    init () {
      let para = {
        labId:this.labId?this.labId:'',
        startTime:this.startValue?moment (this.startValue).format ('YYYY-MM-DD HH:mm:ss').valueOf ():"",
        endTime:this.endValue?moment (this.endValue).format ('YYYY-MM-DD HH:mm:ss').valueOf ():""
      }
      this.approveStatisticList = []
      this.$store.dispatch ('getLabListAct', {})
      this.$store.dispatch ('getCountInfoAct', para).then(response =>{
        if (response.code === 0){
          this.approveStatistic = response.data
        }else {
          this.$message.error(response.message)
        }
      })
    },


    /**
     * Function    : handleSubmit
     * Description : 查询按钮
     * Input       : none
     * Return      : none
     */
    handleSubmit () {
      this.init ()
    },


  },
  created () {
    this.init ()
  },
  mounted () {

  }
}
</script>
